<template>
  <a-spin :spinning="loading">
    <div class="payslip page-miH page-bgBack">
      <div style="padding-bottom:24px">
        <a-row type="flex" justify="space-between" align="middle">
          <a-select v-model="params.year" style="width: 120px" @change="handleChangeYear">
            <a-select-option v-for="(item, i) in yearList" :key="i" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
          <a-button icon="plus" v-if="!showBg" type="primary" @click="addPayslipModal">
            添加工资条
          </a-button>
        </a-row>
      </div>

      <template v-if="showBg">
        <div class="no-payslip">
          <img class="autoimg" src="../../../assets/img/payslip/beijing.png" />
          <div class="cent">
            <h2>电子工资条 全新来袭</h2>
            <h3>
              不使用薪酬管理，直接上传您的工资表，发送微信、短信电子工资条,并实时掌握员工的反馈情况
            </h3>
            <a-button type="primary" class="mg_t20" @click="addPayslip">
              马上开通添加工资表
              <a-icon type="right" />
            </a-button>
          </div>
        </div>
      </template>
      <template v-if="!showBg">
        <div v-for="(item, i) in paySlipList" :key="i" class="content">
          <a-row class="title">
            <strong>{{ `${params.year}年${item.title}月` }}</strong>
          </a-row>
          <a-row v-for="(ite, j) in item.list" :key="j" class="content-con" type="flex" align="middle">
            <a-col :span="3">
              <strong>{{ ite.tableName }}</strong>
            </a-col>
            <a-divider type="vertical" style="height:66px" />
            <a-col :span="3">
              <a-row class="sub_tit mg_b12">计薪人数</a-row>
              <strong>{{ ite.empCount }}人</strong>
            </a-col>
            <a-col :span="4">
              <a-row class="sub_tit mg_b12">应发工资</a-row>
              <strong>{{ ite.salaryAmount }}</strong>
            </a-col>
            <a-divider type="vertical" style="height:66px" />
            <a-col :span="4">
              <a-row class="sub_tit mg_b12">已发放</a-row>
              <strong>{{ ite.sendCount }}人</strong>
            </a-col>

            <a-col :span="3">
              <a-row class="sub_tit mg_b12">问题反馈</a-row>
              <strong>{{ ite.feedbackCount }}人</strong>
            </a-col>
            <a-divider type="vertical" style="height:66px" />
            <a-col class="full">
              <a-row type="flex" justify="center" align="middle">
                <a-col :span="8" class="primary" @click="goDetail(item, ite)">
                  发放详情
                </a-col>
                <a-col :span="8" class="primary">
                  <div>
                    <a-popconfirm title="确定删除这条工资条吗?" ok-text="确定" cancel-text="取消" @confirm="deletePayslip(ite)">
                      删除工资条
                    </a-popconfirm>
                  </div>
                </a-col>
                <a-col :span="8" class="primary" @click="download(item, ite)">
                  导出
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </div>
      </template>
      <addPayslipModal :visible="apmVisible" :options="apmOptions" @change="handleChange" />
    </div>
  </a-spin>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();
export default {
  mixins: [mixin],
  inject: ["reload"],
  name: "PaySlip",
  components: {
    addPayslipModal: () => import("./add-payslip-modal")
  },

  data() {
    return {
      loading: false,
      yearList: [],
      showBg: false,
      apmOptions: {},
      apmVisible: false,
      searchYear: null,
      params: {
        year: new Date().getFullYear()
      },
      paySlipList: []
    };
  },
  computed: {
    ...mapState(["hr"])
  },

  created() {
    this.getPayslipList();
    this.getYars();
  },

  methods: {
    download(item, ite) {
      const token = this.$store.state.auth.token;
      this.exportData = {
        companyId: this.companyId,
        empCount: ite.empCount,
        feedbackCount: ite.feedbackCount,
        readCount: ite.readCount,
        salaryAmountTotal: ite.salaryAmountTotal,
        sendCount: ite.sendCount,
        tableId: ite.id,
        tableName: ite.tableName
      };

      this.url = `/hr/api/v1/salaryTables/export`;
      this.excelName = "电子工资条导出详情" + ".xlsx";
      this.postDownload();
    },
    // 选择年
    handleChangeYear(e) {
      e ? (this.params.year = e) : (this.params.year = new Date().getFullYear());
      this.getPayslipList();
    },
    // 获取年份
    getYars() {
      this.$request({
        url: `/hr/api/v1/salaryTables/salaryTableImportedYearList`,
        params: { companyId: this.hr.companyId }
      }).then(({ data }) => {
        this.yearList = data;
      });
    },
    // 排序
    sortByKey(arr, key) {
      return arr.sort((a, b) => {
        const x = Number(a[key]);
        const y = Number(b[key]);
        return y - x;
      });
    },
    ...mapMutations({ tableId: "wages/tableId" }),
    // 获取工资表
    async getPayslipList() {
      this.loading = true;
      for (const key in this.params) {
        if (!this.params[key]) delete this.params[key];
      }
      const [err, { data }] = await this.awaitWrap(
        this.$request({
          url: "/hr/api/v1/salaryTables/listAllRelation",
          params: { companyId: this.hr.companyId, ...this.params }
        })
      );
      this.loading = false;
      if (err) throw err;
      const arr = [];
      for (const key in data) {
        arr.push({
          title: key,
          list: data[key]
        });
      }
      if (arr.length) {
        this.paySlipList = this.sortByKey(arr, "title");
        this.showBg = false;
      } else {
        this.showBg = true;
      }
    },
    // 选择日期
    panelChange(v, m) {
      this.searchYear = v;
      this.params.year = v.format("YYYY");
      this.getPayslipList();
    },

    // 添加工资条
    addPayslipModal() {
      this.apmVisible = true;
    },
    // 添加工资条
    addPayslip() {
      this.apmVisible = true;
    },
    goDetail(item, ite) {
      this.tableId(ite.id);

      this.$router.push({
        path: "/wages/payslip-detail",
        query: {
          month: item.title,
          sendName: ite.tableName,
          year: ite.year,
          tableId: ite.id
        }
      });
    },
    // 删除工资条
    deletePayslip(e) {
      this.$request({
        url: `/hr/api/v1/salaryTables/${e.id}`,
        method: "DELETE"
      }).then(({ success }) => {
        if (success) {
          this.$notification["success"]({ message: "删除成功" });
          this.getPayslipList();
        }
      });
    },
    // 添加工资条
    handleChange(e) {
      this.apmVisible = false;
      if (e && e.path) {
        this.$router.push({ path: e.path, query: { item: e.item } });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.autoimg {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.payslip {
  padding: 24px;
  .no-payslip {
    position: relative;
    text-align: center;
    margin: auto 0;
    width: 100%;
    height: 300px;
    // background: url(~@/assets/img/payslip/beijing.png);
    background-size: 100% 100%;
    .cent {
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      h2 {
        color: #42b8d7;
        font-weight: 600;
        font-size: 24px;
      }
      h3 {
        color: #9c9c9c;
      }
    }
  }
  .content {
    // padding-top: 24px;
    .title {
      border-left: 3px solid var(--primary);
      padding-left: 24px;
    }
    .content-con {
      margin: 24px 0;
      padding: 24px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid rgba(232, 232, 232, 1);
    }
  }
}
</style>
